/* eslint-disable react/no-unused-state */
import React, { Component } from "react";
import { Input, Button, Select, Grid } from "@icedesign/base";
import { FormBinderWrapper, FormBinder } from "@icedesign/form-binder";
import IceContainer from "@icedesign/container";

const { Row, Col } = Grid;

export default class FeedbackSearch extends Component {
  static displayName = "FeedbackSearch";

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      formValue: {}
    };
  }
  // 得到表单数据
  formChange = value => {
    // console.log("changed value", value);
    this.setState({
      formValue: value
    });
  };

  // 点击搜索按钮
  gotoSearch() {
    let { formValue } = this.state;
    let { onChange, changeTabSel } = this.props;
    for (let k in formValue) {
      if (k !== "status") formValue[k] = formValue[k].trim();
    }
    if (
      formValue.status ||
      formValue.status === 0 ||
      formValue.feedbackPerson ||
      formValue.content
    ) {
      onChange(this.state.formValue);
      changeTabSel("搜索结果", false);
    } else {
      onChange();
      changeTabSel("全部", true);
    }
  }

  render() {
    const { formValue } = this.state;

    return (
      <IceContainer title="搜索">
        <FormBinderWrapper value={formValue} onChange={this.formChange}>
          <Row wrap>
            <Col xxs="24" l="8" style={styles.formCol}>
              <span style={styles.label}>状态:</span>
              <FormBinder name="status">
                <Select placeholder="请选择" style={{ width: "200px" }}>
                  <Select.Option value={1}>已处理</Select.Option>
                  <Select.Option value={2}>已忽略</Select.Option>
                  <Select.Option value={0}>未处理</Select.Option>
                </Select>
              </FormBinder>
            </Col>
            <Col xxs="24" l="8" style={styles.formCol}>
              <span style={styles.label}>作者:</span>
              <FormBinder name="feedbackPerson">
                <Input />
              </FormBinder>
            </Col>
            <Col xxs="24" l="8" style={styles.formCol}>
              <span style={styles.label}>意见内容:</span>
              <FormBinder name="content">
                <Input />
              </FormBinder>
            </Col>
            <Col xxs="24" l="22" style={{ textAlign: "center" }}>
              <Button
                type="primary"
                size="large"
                onClick={() => {
                  this.gotoSearch();
                }}
              >
                搜索
              </Button>
            </Col>
          </Row>
        </FormBinderWrapper>
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    marginBottom: "18px"
  },
  formCol: {
    display: "flex",
    alignItems: "center",
    marginBottom: "20px"
  },
  label: {
    lineHeight: "28px",
    paddingRight: "10px"
  }
};
